<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>易公交</title>
<style type="text/css">
body {
	font-family: "微软雅黑","宋体",Arial,sans-serif;
    font-size: 12px;
}
* {
	margin:0;
	padding:0;
}
img { border:0;}
ul,li {list-style:none;}

#topDiv {
	width:1024px;
	height:100px;
	border:solid 1px #CCCCCC;
	margin: auto;
	margin-bottom:5px;
	background-color:#FFF;
}

#topDiv #divTopAd {
	height: 49px;
}

#topDiv #divTopBottom {
	background: none repeat scroll 0 0 #E9EDF5;
    height: 40px;
}
#topDiv #divTopBottom #searchInput {
	float:right;
	background: url("img/searchDark.png") no-repeat scroll 10px 50% #FFFFFF;
	border-radius: 15px 15px 15px 15px;
    color: #888888;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    margin: 5px;
    padding-left: 30px;
    width: 220px;
}
#topDiv #divTopBottom p.searchP{
	background-color: #CACCC7;
    border-radius: 0 15px 15px 0;
    color: #FFFFFF;
    height: 24px;
    left: 970px;
    padding-left: 8px;
    padding-top: 3px;
    position: relative;
    top: 7px;
    width: 39px;
	cursor:pointer;
}
#topDiv #divTopBottom #divUserInfo {
	color: #767A80;
    letter-spacing: 1pt;
    line-height: 40px;
    overflow: visible;
    position: absolute;
    width: 40%;
	margin-left:10px;
}
#topDiv #divTopBottom #divUserInfo p{margin:0; padding:0;}
#topDiv #divTopBottom #divUserInfo a{ 
	border-left: 2px solid #888888;
    color: #767A80;
    letter-spacing: 1pt;
    margin-left: 10px;
    padding-left: 10px;
    text-decoration: none;
}

#contentDiv {
	width:1024px;
	height:516px;
	margin: auto;
	margin-bottom:5px;
	border:solid 1px #CCCCCC;
}

#contentDiv div.busDetails{
	background-color: #CC0000;
    color: #FFFFFF;
    font-size: 16px;
    height: 38px;
    line-height: 38px;
    padding: 5px 0 0 10px;
    width: 180px;
}

#contentDiv div.busline1 div.line2{
	font-size: 14px;
    font-weight: bold;
    height: 38px;
    line-height: 38px;
    padding: 0px 0 0 5px;
    width: 180px;
	
}

#contentDiv .busline1 {
	border-top: 1px dashed #CCCCCC;
	margin:10px 0 20px 0;
}
.LineC {
	background: url("img/line_bg0419.gif") repeat-x scroll center top transparent;
	background-color:#F8F6F6;
	margin-top: 3px;
    overflow: hidden;
    padding: 0 0 10px;
}

.LineC p a {
	display: block;
	width: 13px;
	padding: 3px 0 3px 3px;
}

.msgDiv { 
	border-bottom: 1px dashed #CCCCCC;
    margin-top: 10px;
    padding-bottom: 10px;
}

.msgDiv img { margin-right:5px; vertical-align: -2px;}

.msgDiv span {
	color: #999999;
    font-weight: bold;
}

#contentDiv .busline1 .LineC .lineDetails {
	margin-left:25px;
}
#contentDiv .busline1 .LineC .lineDetails li{float:left;}
#bottomDiv {
	width:1024px;
	height:150px;
	margin: auto;
	border:solid 1px #CCCCCC;
}

</style>
<script language="javascript" src="js/jquery-1.5.2.min.js"></script>
<script language="javascript" src="js/classMap.js"></script>
<script language="javascript" src="js/ebus.tools.js"></script>
<script language="javascript">
//加载上行线路
function loadBusLine() {
	var busLine = "1=月亮湾,2=荔湾路西,3=南山花园,4=深大附中,5=青青世界,6=前海沿湖路口,7=太子山庄,8=信诺公司,9=南山村西,10=鼎太风华,11=南头火车西站,12=阳光棕榈园,13=大新村";
	var busLineJson = string2Json(busLine);
	var len = busLineJson.length;
	$.each(busLineJson, function(idx, item) {		
		if((idx + 1) < len) {
			$("#lineNum").append('<li><p>' + item.key + '</p><p><img src="img/list_line.gif" /></p><p><a>' + item.value + '</a></p></li>');
		}
		else {
			$("#lineNum").append('<li><p>' + item.key + '</p><p><img src="img/list_dot.gif" /></p><p><a>' + item.value + '</a></p></li>');
		}		
	});
	
	//lineNum2
}

//加载下行线路
function loadBusLine1() {
	var busLine = "1=大新村,2=阳光棕榈园,3=南头火车西站,4=鼎太风华,5=南山村西,6=信诺公司,7=太子山庄,8=前海沿湖路口,9=青青世界,10=深大附中,11=南山花园,12=荔湾路西,13=月亮湾";
	var busLineJson = string2Json(busLine);
	var len = busLineJson.length;
	$.each(busLineJson, function(idx, item) {		
		if((idx + 1) < len) {
			$("#lineNum2").append('<li><p>' + item.key + '</p><p><img src="img/list_line.gif" /></p><p><a>' + item.value + '</a></p></li>');
		}
		else {
			$("#lineNum2").append('<li><p>' + item.key + '</p><p><img src="img/list_dot.gif" /></p><p><a>' + item.value + '</a></p></li>');
		}		
	});

} 

$(function() {
	$searchInput = $("#searchInput");
	$searchInput.val("36路");
	$searchInput.focus(function() {
		if($searchInput.val() == "36路") {
			$searchInput.val("");
		}
	}).focusout(function() {
		if($searchInput.val() == "") {
			$searchInput.val("36路");
		}
	});
	
	$("li>p").css("padding-left", "3px");
	
	$(".searchP").click(function() {
		alert("正在查询36路车公交线路运行情况...");
	});
	
	//加载线路图
	loadBusLine();
	loadBusLine1();
});

</script>
</head>
<body>
<div id="topDiv">
	<div id="divTopAd"></div>
	<div id="divTopBottom">
		<div id="divUserInfo">
		<p style="float: left;">余晖</p>，欢迎来到易巴士<a href="javascript:void(0)">我的账户</a></div>
		<div><input id="searchInput" maxlength="24"><p class="searchP">搜索</p></div>
	</div>
</div>
<div id="contentDiv">
	<div class="busDetails">深圳36路公交线路车</div>
	<div class="busline1">
		<div class="line2">月亮湾<img src="img/bus_arrowr.gif" />大新村</div>
		<div class="LineC">
			<ul id="lineNum" class="lineDetails"></ul>
		</div>
		<div id="msg" class="msgDiv">
			<img src="img/bus_icon6.gif"/><span>票价：</span>2元&nbsp;&nbsp;
			<img src="img/bus_icon7.gif"/><span>运营时间：</span>往大新村方向：05:30-23:00		
		</div>
	</div>
	<div class="busline1">
		<div class="line2">大新村<img src="img/bus_arrowr.gif" />月亮湾</div>
		<div class="LineC">
			<ul id="lineNum2" class="lineDetails"></ul>
		</div>
		<div id="msg2" class="msgDiv">
			<img src="img/bus_icon6.gif"/><span>票价：</span>2元&nbsp;&nbsp;
			<img src="img/bus_icon7.gif"/><span>运营时间：</span>往月亮湾方向：05:30-23:00		
		</div>
	</div>
</div>
<div id="bottomDiv">

</div>
</body>
</html>
